<template>
  <a-modal
      v-model:visible="visible"
      :title="title"
      @ok="handleOk"
      :loading="loading"
      width="700px"
  >
    <a-checkbox-group v-model:value="formData.permissionIds">
      <a-descriptions
          :column="1"
          bordered
      >
        <a-descriptions-item
            v-for="(item,index) in formData.list"
            :key="index"
        >
          <template #label>
<!--            <a-checkbox :value="item.id">-->
              {{ item.permissionName }}
<!--            </a-checkbox>-->
          </template>
          <a-checkbox
              v-for="el in (item.children||[])"
              :key="el.id"
              :value="el.id"
          >
            {{ el.permissionName }}
          </a-checkbox>
        </a-descriptions-item>
      </a-descriptions>
    </a-checkbox-group>
  </a-modal>
</template>

<script lang="ts" setup>
import { getSysPermissions, getTotalSysPermissions } from '@/api/sys-permission'
import { saveRolePermission } from '@/api/sys-role'
import { useModalForm } from '@/modules/use-modules'
import { message } from 'ant-design-vue'

const loadData = async (roleId: string) => {
  const totalPermissions = await getTotalSysPermissions()
  const permissions = await getSysPermissions(roleId)
  return {
    roleId,
    list: totalPermissions,
    permissionIds: permissions.map(e => e.id)
  }
}

const {
  formData,
  loading,
  visible,
  title,
  open,
  close
} = useModalForm({
  roleId: '',
  permissionIds: [],
  list: []
}, loadData)
const emits = defineEmits(['ok'])

const handleOk = async () => {
  await saveRolePermission(formData.value.roleId, formData.value.permissionIds)
  message.success('操作成功！')
  emits('ok')
  close()
}
defineExpose({ open })
</script>

<style scoped>

</style>
